<template>
	<div style="background-color: rgb(246 248 250);">
		<uv-notify ref="notifyRef"></uv-notify>

		<uv-list ref="listRef">
			<uv-list-item v-for="(item,index) in state.subList" key="index">
				<div
					style="padding: 10px;margin: 0px 10px 10px 10px;background-color: rgb(255 255 255);border-radius: 10px;font-size: 14px;">
					<uv-skeleton :loading="item.loading" rows="5" animate>
						<div style="display: flex;justify-content: space-between;padding-bottom: 5px;">
							<div v-if="item.upSub">
								<uv-tags :text="item.upSub.title" size="mini" icon="play-left-fill"
									@click="events.getArticleData('ct',item.upSub.articleSubId,item.articleMain.articleSubId)"></uv-tags>
							</div>
							<div v-else></div>
							<div v-if="item.nextSub">
								<uv-tags :text="item.nextSub.title" size="mini" icon="play-right-fill"
									@click="events.getArticleData('ct',item.nextSub.articleSubId,item.articleMain.articleSubId)"></uv-tags>
							</div>
							<div v-else></div>
						</div>
						<div
							style="display: flex;margin-bottom: 10px;justify-content: space-between;align-items: center;">
							<div style="font-size: 18px;font-weight: bolder;">{{item.articleMain.title}}</div>
							<div style="display: flex;align-items: center;">
								<uv-avatar size="30" :src="item.articleUser.Avatar"></uv-avatar>
								<div style="padding-left: 10px;font-weight: bolder;font-size: 14px;">
									{{item.articleUser.name}}
								</div>
							</div>
						</div>

						<uv-parse :content="item.articleMain.text" :selectable="true"></uv-parse>
						<div style="display: flex;justify-content: end;font-size: 12px;color: #b0b0b0;">
							{{item.articleMain.updateTime}}
						</div>
						<div style="display: flex;justify-content:space-between;padding-top: 10px;">
							<div style="display: flex;">
								<div style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
									<uv-button v-if="item.recommend.isCheck" iconColor="#ffffff" color="#31a7ff"
										icon="arrow-up-fill" :text="item.recommend.count"
										@click="events.recommendFunc(false,item)"></uv-button>
									<uv-button v-else icon="arrow-up-fill" iconColor="#31a7ff"
										:text="item.recommend.count"
										@click="events.recommendFunc(true,item)"></uv-button>
								</div>

								<div style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
									<uv-button v-if="item.thumbs.isCheck" iconColor="#ffffff" color="#31a7ff"
										icon="thumb-up-fill" :text="item.thumbs.count"
										@click="events.thumbsFunc(false,item)"></uv-button>
									<uv-button v-else icon="thumb-up-fill" iconColor="#31a7ff" :text="item.thumbs.count"
										@click="events.thumbsFunc(true,item)"></uv-button>
								</div>

								<div style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
									<uv-button icon="chat" iconColor="#31a7ff" :text="item.remarkCount"
										@click="events.openRemark(item)"></uv-button>
								</div>
							</div>

							<div style="display: flex;">
								<uv-button text="往下写" hairline type="primary"
									@click="events.addSubTitle(item,index)"></uv-button>
								<uv-button text="邀请" hairline type="warning"
									@click="events.shareClick(item)"></uv-button>
							</div>
						</div>
					</uv-skeleton>

				</div>
			</uv-list-item>
		</uv-list>

		<!-- <div ref="listRef">
			<div v-for="(item,index) in state.subList" key="index"
				style="padding: 10px;margin: 0px 10px 10px 10px;background-color: rgb(255 255 255);border-radius: 10px;font-size: 14px;">
				<uv-skeleton :loading="item.loading" rows="5" animate>

					<div style="display: flex;justify-content: space-between;padding-bottom: 5px;">
						<div v-if="item.upSub">
							<uv-tags :text="item.upSub.title" size="mini" icon="play-left-fill"
								@click="events.getArticleData('ct',item.upSub.articleSubId,item.articleMain.articleSubId)"></uv-tags>
						</div>
						<div v-else></div>
						<div v-if="item.nextSub">
							<uv-tags :text="item.nextSub.title" size="mini" icon="play-right-fill"
								@click="events.getArticleData('ct',item.nextSub.articleSubId,item.articleMain.articleSubId)"></uv-tags>
						</div>
						<div v-else></div>
					</div>
					<div style="display: flex;margin-bottom: 10px;justify-content: space-between;align-items: center;">
						<div style="font-size: 18px;font-weight: bolder;">{{item.articleMain.title}}</div>
						<div style="display: flex;align-items: center;">
							<uv-avatar size="30" :src="item.articleUser.Avatar"></uv-avatar>
							<div style="padding-left: 10px;font-weight: bolder;font-size: 14px;">
								{{item.articleUser.name}}
							</div>
						</div>
					</div>

					<uv-parse :content="item.articleMain.text" :selectable="true"></uv-parse>
					<div style="display: flex;justify-content: end;font-size: 12px;color: #b0b0b0;">
						{{item.articleMain.updateTime}}
					</div>
					<div style="display: flex;justify-content:space-between;padding-top: 10px;">
						<div style="display: flex;">
							<div style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
								<uv-button v-if="item.recommend.isCheck" iconColor="#ffffff" color="#31a7ff"
									icon="arrow-up-fill" :text="item.recommend.count"
									@click="events.recommendFunc(false,item)"></uv-button>
								<uv-button v-else icon="arrow-up-fill" iconColor="#31a7ff" :text="item.recommend.count"
									@click="events.recommendFunc(true,item)"></uv-button>
							</div>

							<div style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
								<uv-button v-if="item.thumbs.isCheck" iconColor="#ffffff" color="#31a7ff"
									icon="thumb-up-fill" :text="item.thumbs.count"
									@click="events.thumbsFunc(false,item)"></uv-button>
								<uv-button v-else icon="thumb-up-fill" iconColor="#31a7ff" :text="item.thumbs.count"
									@click="events.thumbsFunc(true,item)"></uv-button>
							</div>

							<div style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
								<uv-button icon="chat" iconColor="#31a7ff" :text="item.remarkCount"
									@click="events.openRemark(item)"></uv-button>
							</div>
						</div>

						<div style="display: flex;">
							<uv-button text="往下写" hairline type="primary"
								@click="events.addSubTitle(item,index)"></uv-button>
							<uv-button text="邀请" hairline type="warning" @click="events.shareClick(item)"></uv-button>
						</div>
					</div>
				</uv-skeleton>

			</div>
		</div> -->

		<uv-load-more :status="state.isLoading" dashed line color="#3f89fe" lineColor="#3f89fe"
			@loadmore="events.downRefreshBtn"></uv-load-more>


		<uv-popup ref="popupRemarkRef" round="10" closeable>

			<view style="height:80vh;padding: 10px 5px 10px 10px;display: flex;flex-direction: column;">
				<div
					style="height: 3vh;display: flex;font-size: 18px;align-items: center;justify-content: center;padding-bottom: 5px;">
					全部评论</div>
				<div style="flex: 1;display: flex;flex-direction: column;">
					<scroll-view style="height:70vh" scroll-y="true" @scrolltolower="events.popupRemarkBottom">
						<uv-skeletons :loading="popupRemark.showSkeleton" :skeleton="popupRemark.skeleton">
							<div v-for="item in popupRemark.remarkList" key="index">
								<div>
									<div style="display: flex;">
										<uv-avatar size="30" :src="item.user.Avatar"></uv-avatar>
										<div style="padding-left: 10px;font-weight: bolder;font-size: 14px;">
											{{item.user.name}}
										</div>
									</div>
									<div style="padding-left: 40px;display: flex;flex-direction: column;">
										<div style="padding: 5px 0px;"
											@click="events.openPopupRemarkInput(0,false,item)">
											{{item.text}}
										</div>
										<div style="display: flex;justify-content: space-between;">
											<div style="font-size: 12px;color: #b0b0b0;">{{item.createTime}}</div>
											<div
												style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
												<uv-button v-if="item.thumbs.isCheck" iconColor="#ffffff"
													color="#31a7ff" icon="thumb-up-fill" :text="item.thumbs.count"
													@click="events.thumbsRemarkFunc(false,item)"></uv-button>
												<uv-button v-else icon="thumb-up-fill" iconColor="#31a7ff"
													:text="item.thumbs.count"
													@click="events.thumbsRemarkFunc(true,item)"></uv-button>
											</div>
										</div>


										<div v-if="item.subRemarks.list.length > 0">
											<div v-for="(sitem,sindex) in item.subRemarks.list" :key="sindex">
												<div>
													<div style="display: flex;">
														<uv-avatar size="30" :src="sitem.user.Avatar"></uv-avatar>
														<div
															style="display: flex;padding-left: 10px;font-weight: bolder;font-size: 14px;">
															{{sitem.user.name}}
															<div v-if="sitem.toUser.name"
																style="display: flex;align-items: baseline;">
																<uv-icon name="play-right-fill" size="12"
																	style="padding:0px 10px;"></uv-icon>
																<span>{{sitem.toUser.name}}</span>
															</div>
														</div>
													</div>
													<div
														style="padding-left: 40px;display: flex;flex-direction: column;">
														<div style="padding: 5px 0px;"
															@click="events.openPopupRemarkInput(2,true,sitem)">
															{{sitem.text}}
														</div>
														<div style="display: flex;justify-content: space-between;">
															<div style="font-size: 12px;color: #b0b0b0;">
																{{sitem.createTime}}
															</div>
															<div
																style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
																<uv-button v-if="sitem.thumbs.isCheck"
																	iconColor="#ffffff" color="#31a7ff"
																	icon="thumb-up-fill" :text="sitem.thumbs.count"
																	@click="events.thumbsRemarkFunc(false,sitem)"></uv-button>
																<uv-button v-else icon="thumb-up-fill"
																	iconColor="#31a7ff" :text="sitem.thumbs.count"
																	@click="events.thumbsRemarkFunc(true,sitem)"></uv-button>
															</div>
														</div>


													</div>
												</div>
											</div>
											<div v-if="item.subRemarks.totals > 2" style="padding-top: 5px;">
												<uv-button type="info" :plain="true" :hairline="true" size="mini"
													shape="circle" :text="`查看全部${item.subRemarks.totals}条回复`"
													@click="events.openRemarkSub(item)"></uv-button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div v-if="popupRemark.remarkList.length == 0">
								<uv-empty mode="coupon" icon="https://cdn.uviewui.com/uview/empty/coupon.png"
									text="啥都没有"></uv-empty>
							</div>
							<div style="height: 20px;"></div>
						</uv-skeletons>
					</scroll-view>
					<uv-loading-icon :show="popupRemark.loading" style="margin-top: -25px;"></uv-loading-icon>

					<div style="height: 5vh;margin-top: 10px;">
						<uv-input shape="circle" :disabled="true" placeholder="参与讨论"
							@click="events.openPopupRemarkInput(0,false)">
							<template v-slot:suffix>
								<uv-button type="primary" :disabled="true" size="mini">发布</uv-button>
							</template>
						</uv-input>
					</div>
				</div>
			</view>
		</uv-popup>

		<uv-popup ref="popupRemarkSubRef" round="10" closeable>

			<view style="height:80vh;margin: 10px 5px 10px 10px;display: flex;flex-direction: column;">
				<div
					style="height: 3vh;display: flex;font-size: 18px;align-items: center;justify-content: center;padding-bottom: 5px;">
					回复评论</div>

				<div style="flex: 1;display: flex;flex-direction: column;">

					<scroll-view style="height:70vh" scroll-y="true" @scrolltolower="events.popupRemarkSubBottom">
						<div>
							<div style="display: flex;">
								<uv-avatar size="30" :src="popupRemark.subRemark?.user.Avatar"></uv-avatar>
								<div style="display: flex;padding-left: 10px;font-weight: bolder;font-size: 14px;">
									{{popupRemark.subRemark?.user.name}}
								</div>
							</div>
							<div style="padding-left: 40px;display: flex;flex-direction: column;">
								<div style="padding: 5px 0px;"
									@click="events.openPopupRemarkInput(1,false,popupRemark.subRemark)">
									{{popupRemark.subRemark?.text}}
								</div>
								<div style="display: flex;justify-content: space-between;">
									<div style="font-size: 12px;color: #b0b0b0;">{{popupRemark.subRemark?.createTime}}
									</div>
									<div
										style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
										<uv-button v-if="popupRemark.subRemark?.thumbs.isCheck" iconColor="#ffffff"
											color="#31a7ff" icon="thumb-up-fill"
											:text="popupRemark.subRemark?.thumbs.count"
											@click="events.thumbsRemarkFunc(false,popupRemark.subRemark)"></uv-button>
										<uv-button v-else icon="thumb-up-fill" iconColor="#31a7ff"
											:text="popupRemark.subRemark?.thumbs.count"
											@click="events.thumbsRemarkFunc(true,popupRemark.subRemark)"></uv-button>
									</div>
								</div>
							</div>
						</div>
						<uv-divider :text="`${popupRemark.subtotals} 回复`"></uv-divider>
						<uv-skeletons :loading="popupRemark.showSubSkeleton" :skeleton="popupRemark.skeleton">
							<div v-for="item in popupRemark.subRemarkList" key="index">
								<div>
									<div style="display: flex;">
										<uv-avatar size="30" :src="item.user.Avatar"></uv-avatar>
										<div
											style="display: flex;padding-left: 10px;font-weight: bolder;font-size: 14px;">
											{{item.user.name}}
											<div v-if="item.toUser.name" style="display: flex;align-items: baseline;">
												<uv-icon name="play-right-fill" size="12"
													style="padding:0px 10px;"></uv-icon>
												<span>{{item.toUser.name}}</span>
											</div>
										</div>
									</div>
									<div style="padding-left: 40px;display: flex;flex-direction: column;">
										<div style="padding: 5px 0px;"
											@click="events.openPopupRemarkInput(1,true,item)">
											{{item.text}}
										</div>
										<div style="display: flex;justify-content: space-between;">
											<div style="font-size: 12px;color: #b0b0b0;">{{item.createTime}}</div>
											<div
												style="display: flex;justify-items: center;align-items: center;padding: 0px 2px;">
												<uv-button v-if="item.thumbs.isCheck" iconColor="#ffffff"
													color="#31a7ff" icon="thumb-up-fill" :text="item.thumbs.count"
													@click="events.thumbsRemarkFunc(false,item)"></uv-button>
												<uv-button v-else icon="thumb-up-fill" iconColor="#31a7ff"
													:text="item.thumbs.count"
													@click="events.thumbsRemarkFunc(true,item)"></uv-button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div style="height: 20px;"></div>
						</uv-skeletons>
					</scroll-view>
					<uv-loading-icon :show="popupRemark.subLoading" style="margin-top: -25px;"></uv-loading-icon>

					<div style="height: 5vh;margin-top: 10px;">
						<uv-input shape="circle" :disabled="true" placeholder="参与讨论"
							@click="events.openPopupRemarkInput(1,false,popupRemark.subRemark)">
							<template v-slot:suffix>
								<uv-button type="primary" :disabled="true" size="mini">发布</uv-button>
							</template>
						</uv-input>
					</div>
				</div>
			</view>
		</uv-popup>

		<uv-popup ref="popupRemarkInputRef" round="10">
			<div style="max-height: 60vh;">
				<div style="display: flex;">
					<div
						style="width: 100vw;display: flex;justify-content: center;padding: 5px;font-weight: bolder;align-items: center;margin-left: 50px;">
						<span v-if="popupRemark.popupRemarkToUserInfo.name">对
							<span style="color: #3798ff;"> {{popupRemark.popupRemarkToUserInfo.name}} </span>
						</span>
						说点啥?
					</div>
					<uv-button type="primary" :loading="popupRemark.popupRemarkLoading"
						:disabled="popupRemark.popupRemarkValue == ''" @click="events.addRemark">发布</uv-button>
				</div>
				<uv-textarea v-model="popupRemark.popupRemarkValue" border="none" focus height="30vh"
					:disabled="popupRemark.popupRemarkLoading" placeholder="参与讨论">
				</uv-textarea>

				<div style="height: 50px;"></div>
			</div>
		</uv-popup>


		<div style="height: 40px;"></div>
		<div v-if="state.showButtonMenu" style="position: fixed;bottom: 0px;">
			<uv-transition :show="state.showButtonMenu" mode="slide-bottom">
				<div
					style="display: flex;background-color: #fff;height: 40px;width: 100vw;z-index: 998;justify-content: space-around;">

					<!-- uv-button style="flex: 1;" plain @click="events.catalogFunc">
						<uv-icon name="list" size="20" label="目录" labelPos="bottom" labelSize="10"></uv-icon>
					</uv-button> -->

					<uv-button v-if="state.collect.isCheck" style="flex: 1;" plain @click="events.collectFunc(false)">
						<uv-icon name="star-fill" color="#00aaff" size="20" label="收藏" labelPos="bottom"
							labelSize="10"></uv-icon>
						<uv-badge absolute :offset="[0,'22%']" style="font-size: 12px;" max="99"
							:value="state.collect.count"></uv-badge>
					</uv-button>
					<uv-button v-else style="flex: 1;" plain @click="events.collectFunc(true)">
						<uv-icon name="star" size="20" label="收藏" labelPos="bottom" labelSize="10"></uv-icon>
						<uv-badge absolute :offset="[0,20]" style="font-size: 12px;" max="99"
							:value="state.collect.count"></uv-badge>
					</uv-button>

					<uv-button style="flex: 1;" open-type="share" plain @click="events.shareFunc">
						<uv-icon name="share" size="20" label="分享" labelPos="bottom" labelSize="10"></uv-icon>
					</uv-button>
				</div>
			</uv-transition>
		</div>

	</div>
</template>

<script>
	import {
		nextTick,
		reactive,
		ref
	} from 'vue'

	import {
		onShow,
		onReady,
		onLoad,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		getArticleMain,
		getArticleSub,
		thumbsArticle,
		recommendApi,
		addRemarkApi,
		getRootRemarkApi,
		getSubRemarkApi,
		thumbsRemarkApi,
		setCollectApi
	} from '../../api/index';
	import {
		clone,
		toDateString
	} from 'xe-utils';

	export default {
		setup() {
			const state = reactive({
				mainId: null,
				parentid: null,
				nowid: null,
				articleInfo: {
					createTime: "",
					isExclusive: 1,
					isPublic: 1,
					tags: [],
					userId: ""
				},
				subList: [],
				oldScroll: 0,
				//储存每个文章信息
				subhistoryObj: {},
				//储存切换的所有下级subID
				historySubid: {},
				//页面可视高度
				windowHeight: 800,

				catalogList: [],
				collect: {
					isCheck: false,
					count: 0
				},
				haveUpSub: false,
				isLoading: "loadmore",
				showButtonMenu: true,

				showCatalog: false,
				// onShow 中判断是否是往下写
				isAddArticle: false,

			})

			const popupRemark = reactive({
				//评论输入
				popupRemarkValue: "",
				//评论信息
				articleSubId: "",
				//评论回复指向
				popupRemarkToUserInfo: {
					parentId: null,
					id: null,
					name: ""
				},
				//数量
				totals: 0,
				pageIndex: 1,
				//评论列表
				remarkList: [],

				//评论子表
				subRemark: null,
				subIv: null,
				subpageIndex: 1,
				subRemarkList: [],
				subtotals: 0,

				//是否是一级页面打开输入
				inputIsRoot: 0,
				//评论提交时加载
				popupRemarkLoading: false,
				//获取时的时间偏移向量
				iv: null,
				//骨架屏开启
				showSkeleton: false,
				showSubSkeleton: false,
				//等待
				loading: false,
				subLoading: false,

				//骨架屏模板
				skeleton: [{
					type: 'flex',
					num: 1,
					children: [{
						type: 'avatar',
						num: 1,
						style: 'marginRight: 10rpx;'
					}, {
						type: 'line',
						num: 3,
						gap: '30rpx',
						style: ['width: 50%', null, 'width:100%;']
					}, {
						type: 'custom',
						num: 1,
						style: 'width: 100%;height:15vh;marginLeft: 10rpx;'
					}]
				}, {
					type: 'flex',
					num: 1,
					children: [{
						type: 'avatar',
						num: 1,
						style: 'marginRight: 10rpx;'
					}, {
						type: 'line',
						num: 3,
						gap: '30rpx',
						style: ['width: 50%', null, 'width:100%;']
					}, {
						type: 'custom',
						num: 1,
						style: 'width: 100%;height:15vh;marginLeft: 10rpx;'
					}]
				}, {
					type: 'flex',
					num: 1,
					children: [{
						type: 'avatar',
						num: 1,
						style: 'marginRight: 10rpx;'
					}, {
						type: 'line',
						num: 3,
						gap: '30rpx',
						style: ['width: 50%', null, 'width:100%;']
					}, {
						type: 'custom',
						num: 1,
						style: 'width: 100%;height:15vh;marginLeft: 10rpx;'
					}]
				}, {
					type: 'flex',
					num: 1,
					children: [{
						type: 'avatar',
						num: 1,
						style: 'marginRight: 10rpx;'
					}, {
						type: 'line',
						num: 3,
						gap: '30rpx',
						style: ['width: 50%', null, 'width:100%;']
					}, {
						type: 'custom',
						num: 1,
						style: 'width: 100%;height:15vh;marginLeft: 10rpx;'
					}]
				}]
			})

			//消息框提示ref
			const notifyRef = ref(null);
			//设置类(暂时无用)
			const catalogRef = ref(null);
			//一级评论弹窗显示
			const popupRemarkRef = ref(null);
			//评论输入弹窗显示
			const popupRemarkInputRef = ref(null);
			//二级评论弹窗显示
			const popupRemarkSubRef = ref(null);
			//内容ref(暂时用来获取当前内容高度,判断是否向下刷新)
			const listRef = ref(null);

			onLoad(async (e) => {
				console.log("ONLOAD", e);
				state.mainId = e.mainId;
				state.nowid = e.subId;
			})

			onReady(async () => {
				await methods.getArticleMainFunc(state.mainId);
				await events.getArticleData('ct', state.nowid);
			});

			onShow(async () => {
				const {
					windowHeight
				} = await uni.getSystemInfoSync();
				state.windowHeight = windowHeight;

				if (state.isAddArticle) {
					events.getArticleData("dw");
					state.isAddArticle = false;
				}
			})

			onReachBottom((e) => {
				events.buttonMenu(true);
				events.getArticleData("dw");
			})

			// onPageScroll(({
			// 	scrollTop
			// }) => {
			// 	console.log("onReachBottom11111", scrollTop);
			// 	state.oldScroll = scrollTop;
			// 	if (state.parentid) {
			// 		events.getArticleData("up");
			// 	}
			// })

			onPageScroll(async (e) => {
				const {
					scrollTop
				} = e;
				console.log("eeee", e, scrollTop);
				if (scrollTop == 0) {
					if (state.parentid) {
						await events.getArticleData("up");
					}
				}

				if (state.oldScroll <= scrollTop) {

					if (scrollTop - state.oldScroll > 50) {
						state.oldScroll = scrollTop;
						if (state.showButtonMenu) {
							events.buttonMenu(false);
						}
					}
				} else if (state.oldScroll - scrollTop > 50) {
					events.buttonMenu(true);
				}

			})



			const events = {
				/**
				 * 评论一级触底
				 */
				popupRemarkBottom: () => {
					console.log("1");
					methods.getRemarkInfoFunc();
				},
				/**
				 * 评论二级触底
				 */
				popupRemarkSubBottom: () => {
					console.log("2");
					methods.getRemarkSubInfoFunc();
				},

				/**
				 * 续写
				 */
				addSubTitle: (item, index) => {
					console.log("item", item, index, state.subList.length);
					if (index == state.subList.length - 1) {
						state.isAddArticle = true;
					}
					uni.navigateTo({
						url: `/pages/addSubTitle/index?parentId=${item.articleMain.articleSubId}`,
					})
				},
				/**
				 * 向下刷新按钮
				 */
				downRefreshBtn: () => {

					events.getArticleData("dw");
				},
				/**
				 * 底部菜单栏展示
				 */
				buttonMenu: (status) => {
					state.showButtonMenu = status;
				},
				/**
				 * 收藏操作
				 */
				collectFunc: async (status) => {

					const {
						done,
						data
					} = await setCollectApi(state.mainId, status);

					if (done) {
						state.collect.isCheck = status;
						if (data.isChecked) {
							if (status) {
								state.collect.count += 1;
							} else {
								state.collect.count -= 1;
							}
						}
					} else {
						notifyRef.value.error('操作失败,请稍后尝试!');
					}

				},
				shareFunc: () => {

				},
				catalogFunc: () => {
					catalogRef.value.open();
				},
				/**
				 * 点赞操作
				 */
				thumbsFunc: async (status, item) => {
					console.log(status, item);
					const {
						done,
						data
					} = await thumbsArticle(item.articleMain.articleSubId, status);
					if (done) {
						item.thumbs.isCheck = status;
						if (data.isChecked) {
							if (status) {
								item.thumbs.count += 1;
							} else {
								item.thumbs.count -= 1;
							}
						}
					} else {
						notifyRef.value.error('操作失败');
					}
				},
				/**
				 * 评论点赞操作
				 */
				thumbsRemarkFunc: async (status, item) => {
					const {
						done,
						data
					} = await thumbsRemarkApi(popupRemark.articleSubId, status, item.remarkId);
					if (done) {
						item.thumbs.isCheck = status;
						if (data.isChecked) {
							if (status) {
								item.thumbs.count += 1;
							} else {
								item.thumbs.count -= 1;
							}
						}
					} else {
						notifyRef.value.error('操作失败');
					}
				},
				/**
				 * 推荐操作
				 */
				recommendFunc: async (status, item) => {
					console.log(status, item);
					// state.dataList[index].upSub = status;
					// if (status) state.dataList[index].upSubNum += 1;
					// else state.dataList[index].upSubNum -= 1;
					const {
						done,
						data
					} = await recommendApi(item.articleMain.articleSubId, status);
					if (done) {
						item.recommend.isCheck = status;
						if (data.isChecked) {
							if (status) {
								item.recommend.count += 1;
							} else {
								item.recommend.count -= 1;
							}
						}
					} else {
						notifyRef.value.error('操作失败');
					}

				},
				/**
				 * 打开评论
				 */
				openRemark: async (item) => {
					popupRemark.showSkeleton = true;
					popupRemark.popupRemarkValue = "";
					popupRemark.articleSubId = item.articleMain.articleSubId;
					popupRemarkRef.value.open("bottom");
					await methods.getRemarkInfoFunc(true);
					popupRemark.showSkeleton = false;
					item.remarkCount = popupRemark.totals;
				},
				/**
				 * 打开子评论
				 */
				openRemarkSub: async (item) => {
					console.log("item", item);

					popupRemark.showSubSkeleton = true;
					popupRemark.subRemark = item;
					popupRemarkSubRef.value.open("bottom");
					await methods.getRemarkSubInfoFunc(true);
					popupRemark.showSubSkeleton = false;
				},
				/**
				 * 点击评论人员
				 */
				openPopupRemarkInput: (isRoot, istouser, item) => {
					console.log("iem", item);

					if (item) {
						popupRemark.popupRemarkToUserInfo.parentId = item.parentRemarkId;
						popupRemark.popupRemarkToUserInfo.name = item.user.name;
						if (istouser) {
							popupRemark.popupRemarkToUserInfo.id = item.user.userId;
						} else {
							popupRemark.popupRemarkToUserInfo.id = null;
						}
					} else {
						popupRemark.popupRemarkToUserInfo = {
							parentId: null,
							id: null,
							name: ""
						};
					}
					popupRemark.inputIsRoot = isRoot;
					popupRemarkInputRef.value.open("bottom");
				},

				//添加评论
				addRemark: async () => {
					if (!popupRemark.popupRemarkLoading) {
						popupRemark.popupRemarkLoading = true;

						if (popupRemark.popupRemarkValue) {
							console.log(popupRemark);
							const {
								articleSubId,
								popupRemarkToUserInfo,
								popupRemarkValue
							} = popupRemark;
							const {
								parentId,
								id,
								name
							} = popupRemarkToUserInfo;
							const {
								done,
								data
							} = await addRemarkApi(articleSubId, parentId, id, popupRemarkValue);
							if (done) {
								notifyRef.value.success('发布成功!');
								popupRemark.popupRemarkValue = "";
								popupRemarkInputRef.value.close();
								setTimeout(async () => {
									switch (popupRemark.inputIsRoot) {
										case 0:
										case 2:
											popupRemark.showSkeleton = true;
											await methods.getRemarkInfoFunc(true);
											popupRemark.showSkeleton = false;
											break;
										case 1:
											popupRemark.showSubSkeleton = true;
											await methods.getRemarkSubInfoFunc(true);
											popupRemark.showSubSkeleton = false;
											break;
										default:
											break;
									}
								}, 200);
							} else {
								notifyRef.value.error('发布失败!');
							}
						} else {
							notifyRef.value.error('求你了,写点什么吧!');
						}
						popupRemark.popupRemarkLoading = false;
					}
				},
				/**
				 * 查询数据
				 * id 只在type=ct时使用 无id表示刚开始获取 
				 */
				getArticleData: (type, ArticleSubId, upID) => {
					return new Promise(async reslove => {
						if (state.isLoading != "loading") {
							state.isLoading = "loading";
							switch (type) {
								case "up":
									state.isLoading = await methods.getArticleSubFunc(0, state
										.parentid);
									break;
								case "ct":
									if (upID) {
										const subIndex = state.subList.findIndex(v => v
											.articleMain.articleSubId ==
											upID);
										state.subList[subIndex].loading = true;
									}
									state.isLoading = await methods.getArticleSubFunc(1, ArticleSubId,
										upID);

									break;
								case "dw":
									const downId = state.subList[state.subList.length - 1].articleMain
										.articleSubId;

									state.isLoading = await methods.getArticleSubFunc(2, downId);
									break;
							}
							reslove(true);
						} else {
							reslove(true);
						}
					})
				},
				/**
				 * 邀请分享
				 */
				shareClick: () => {
					uni.showShareMenu({
						success(v) {
							console.log("vvv", v);
						}
					});
				},
			}

			const methods = {

				/**
				 * 获取主文章信息
				 */
				getArticleMainFunc: async (mainID) => {
					const {
						done,
						data
					} = await getArticleMain(mainID);

					if (done) {
						state.articleInfo = {
							createTime: data.createTime,
							isExclusive: data.isExclusive,
							isPublic: data.isPublic,
							tags: data.tags,
							userId: data.userId,
						}
						state.collect = data.collect;
					} else {
						notifyRef.value.error('文章获取失败:' + data.message);
					}
				},
				/**
				 * 获取子文章信息
				 */
				getArticleSubFunc: (type, ArticleSubId, upID) => {
					return new Promise(reslove => {

						setTimeout(async () => {
							const isDown = type == 2 ? true : false;
							const {
								done,
								data
							} = await getArticleSub(isDown ? 1 : 0, ArticleSubId);
							if (done) {
								let subModel = data.subArticleModel;
								subModel.loading = false;

								switch (type) {
									case 0: //向上
										//判断是否有其他
										if (subModel.otherSubs.length > 1) {
											subModel.nextSub = subModel.otherSubs[1];
										}

										state.subList.unshift(subModel);
										state.parentid = subModel.articleMain.parentSubId;
										break;
									case 1: //平级
										if (upID) {
											const subIndex = state.subList.findIndex(v => v
												.articleMain.articleSubId ==
												upID);

											const oldArticle = clone(state.subList[subIndex],
												true);

											if (Object.hasOwnProperty.call(state.subhistoryObj,
													subModel.articleMain
													.articleSubId)) {
												const hissub = state.subhistoryObj[subModel
													.articleMain
													.articleSubId];
												if (hissub.upSub) {
													subModel.upSub = {
														title: hissub.upSub.title,
														articleSubId: hissub.upSub
															.articleSubId,
														reCommendCount: hissub.upSub
															.reCommendCount,
													};
												}

												if (hissub.nextSub) {
													subModel.nextSub = {
														title: hissub.nextSub.title,
														articleSubId: hissub.nextSub
															.articleSubId,
														reCommendCount: hissub.nextSub
															.reCommendCount,
													};
												}



											} else {

												//判断是否存在下一篇
												if (subModel.otherSubs.length > 1) {
													const nextIndex = subModel.otherSubs
														.findIndex(
															v => !(Object
																.hasOwnProperty.call(state
																	.subhistoryObj, v
																	.articleSubId
																) || v.articleSubId ==
																subModel.articleMain
																.articleSubId))
													if (nextIndex > -1) {
														subModel.nextSub = subModel.otherSubs[
															nextIndex];
													}
												}

												//存储上一篇信息
												const hisupsub = state.subhistoryObj[oldArticle
													.articleMain.articleSubId];
												subModel.upSub = {
													title: hisupsub.title,
													articleSubId: hisupsub.articleSubId,
													reCommendCount: hisupsub
														.reCommendCount,
												};

											}

											console.log("dddddd", state.subList.slice(
												subIndex + 1, state.subList.length));

											state.historySubid[upID] = state.subList.slice(
												subIndex + 1, state.subList.length).map((
												v) => v.articleMain.articleSubId)

											state.subList[subIndex] = subModel;
											state.subList = state.subList.slice(0, subIndex +
												1);

											if (Object.hasOwnProperty.call(state.historySubid,
													subModel.articleMain
													.articleSubId)) {
												const oldSubID = state.historySubid[subModel
													.articleMain
													.articleSubId];
												console.log("oldSubID", oldSubID);
												for (var i = 0; i < oldSubID.length; i++) {
													const oldHistoryData = state.subhistoryObj[
														oldSubID[i]];
													console.log("oldHistoryData",
														oldHistoryData);
													state.subList.push(oldHistoryData
														.catchData);
												}
											}

										} else {
											//判断是否有其他
											if (subModel.otherSubs.length > 1) {
												subModel.nextSub = subModel.otherSubs[1];
											}
											state.subList.push(subModel);
											state.parentid = subModel.articleMain.parentSubId;
											methods.autoGetSubFunc(subModel.articleMain
												.articleSubId, subModel.articleMain.text);
										}
										state.nowid = subModel.articleMain.articleSubId
										break;
									case 2: //向下

										if (subModel.otherSubs.length > 1) {
											subModel.nextSub = subModel.otherSubs[1];
										}
										state.subList.push(subModel);
										state.nowid = subModel.articleMain.articleSubId
										methods.autoGetSubFunc(subModel.articleMain
											.articleSubId, subModel.articleMain.text);
										break;
								}
								console.log("subModel", subModel, state.nowid);

								//历史记录,存储当前浏览的信息 ,避免后续重复浏览
								state.subhistoryObj[subModel.articleMain.articleSubId] = {
									title: subModel.articleMain.title,
									articleSubId: subModel.articleMain.articleSubId,
									reCommendCount: subModel.recommend.count,
									nextSub: subModel.nextSub,
									upSub: subModel.upSub,
									catchData: subModel
								}
								console.log("state.subhistoryObj", state.subhistoryObj);
								reslove("loadmore")
							} else {
								console.log("data", data);
								switch (data.statusCode) {
									case 1004:
										reslove("nomore")
										break;
								}
								// notifyRef.value.error('文章信息获取失败:' + data.message);
							}
						}, 500)

					})


				},
				/**
				 * 自动向下获取
				 */
				autoGetSubFunc: (articleSubId, text) => {
					setTimeout(() => {
						console.log("text", text, text.length, listRef.value.$el.offsetHeight, state
							.windowHeight);
	
						if (listRef.value.$el.offsetHeight < (state.windowHeight + 100)) {

							events.getArticleData("dw");

						}
					}, 500)
				},
				/**
				 * 获取评论信息
				 */
				getRemarkInfoFunc: async (isrefresh) => {
					if (!popupRemark.loading) {
						popupRemark.loading = true;
						let {
							articleSubId,
							pageIndex
						} = popupRemark;
						if (isrefresh) {
							pageIndex = 1;
							popupRemark.remarkList = [];
							popupRemark.iv = toDateString(new Date(), "yyyy-MM-ddTHH:mm:ss");
						}

						if (pageIndex != null) {
							const {
								done,
								data
							} = await getRootRemarkApi(articleSubId, popupRemark.iv, pageIndex);
							if (done) {
								if (data.list.length > 0) {
									popupRemark.remarkList = popupRemark.remarkList.concat(data.list.map(v => {
										return {
											...v,
											parentRemarkId: v.remarkId
										}
									}));

									popupRemark.totals = data.totals;
									popupRemark.pageIndex = pageIndex + 1;
								} else {
									popupRemark.pageIndex = null;
								}

							} else {
								notifyRef.value.error('获取失败!');
							}
						}


						popupRemark.loading = false;
					}

				},
				/**
				 * 获取评论子表
				 */
				getRemarkSubInfoFunc: async (isrefresh) => {
					if (!popupRemark.subLoading) {
						popupRemark.subLoading = true;

						let {
							subRemark,
							subpageIndex
						} = popupRemark;

						if (isrefresh) {
							subpageIndex = 1;
							popupRemark.subRemarkList = [];
							popupRemark.subIv = toDateString(new Date(), "yyyy-MM-ddTHH:mm:ss");
						}

						if (subpageIndex != null) {
							const {
								done,
								data
							} = await getSubRemarkApi(subRemark.remarkId, popupRemark.subIv, subpageIndex);
							if (done) {
								if (data.list.length > 0) {
									popupRemark.subRemarkList = popupRemark.subRemarkList.concat(data.list);
									popupRemark.subtotals = data.totals;
									popupRemark.subpageIndex = subpageIndex + 1;
								} else {
									popupRemark.subpageIndex = null;
								}


							} else {
								notifyRef.value.error('获取失败!');
							}
						}
						popupRemark.subLoading = false;
					}
				}
			}

			return {
				state,
				notifyRef,
				catalogRef,
				popupRemarkRef,
				popupRemarkInputRef,
				popupRemarkSubRef,
				popupRemark,
				events,
				listRef
			}
		}
	}
</script>

<style>
</style>